<template>
  <div :class="['common_tree_wrap', !pushFlag && 'zeroWidth']">
    <div v-show="pushFlag" class="tree_content">
      <div class="tree_search_wrap">
        <div class="search_ipt">
          <el-input
            v-model="filterText"
            @change="handleFilter"
            class="jk_common_input001"
            placeholder="搜索"
            suffix-icon="el-icon-search"
            clearable
          />
        </div>
      </div>
      <el-scrollbar class="el-scrollbar-bai">
        <div class="tree_main">
          <el-tree
            :key="treeData.length"
            class="jk_common_tree001"
            :data="treeData"
            :current-node-key="currentId"
            :props="defaultProps"
            :expand-on-click-node="expandOnClickNode"
            node-key="code"
            ref="tree"
            style="min-height: 80vh"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
            :default-expand-all="expendAll"
            :default-expanded-keys="treeData.length > 0 ?[treeData[0].code] : []"
            :accordion="!expendAll"
          />
        </div>
      </el-scrollbar>
    </div>
    <div v-show="!pushFlag" class="tree_not_content">
      <div class="not_content_text">设备类型树</div>
    </div>
    <div class="push_wrap" @click="onPushBoxFn">
      <div
        :class="[
          'push_icon',
          pushFlag ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right',
        ]"
      ></div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/myApi/moshipeizhi.js";
export default {
  props: {
    expandOnClickNode: {
      type: Boolean,
      default: false,
    },
    treeData: {
      type: Array,
      default: () => [],
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label",
        };
      },
    },
    currentId: {
      type: String,
      default: () => "",
    },
    onlyLeaves: {
      type: Boolean,
      default: false,
    },
    expendAll: {
      type: Boolean,
      default: false,
    },
    emitNode: {
      type: Boolean,
      default: false
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      filterText: "",
      pushFlag: true, //是否是打开状态
    };
  },
  watch: {
    /*
    filterText(val) {
      this.$refs.tree.filter(val);
      if (val) {
        this.expandFilteredNodes();
      }
    },
    */
  },
  methods: {
    handleFilter(val) {
      console.log('handleFilter2', val);
      this.$refs.tree.filter(val);
      if (val) {
        this.expandFilteredNodes();
      }
    },
    // 筛选节点
    // filterNode(value, data) {
    //   if (!value) return true;
    //   return data[this.defaultProps.label].indexOf(value) !== -1;
    // },
    expandFilteredNodes() {
      // After filtering, expand all matched nodes and their parents
      const nodes = this.$refs.tree.store.nodesMap;
      for (const nodeKey in nodes) {
        const node = nodes[nodeKey];
        if (node.visible && node.children && node.children.length) {
          this.$refs.tree.expandNode(node, true);
        }
      }
    },
    // 筛选节点
    filterNode(value, data, node) {
      if (!value) return true;
      let parentNode = node.parent;
      let labels = [node.label];
      let level = 1;
      while (level < node.level) {
        labels = [...labels, parentNode.label];
        parentNode = parentNode.parent;
        level++;
      }
      return labels.some((label) => label.indexOf(value) !== -1);
    }
    ,

    //tree点击节点
    handleNodeClick(cell, node) {
      if(this.onlyLeaves && cell.children){
        // this.$message.warning('只有测点可以查看历史');
      }else if(this.emitNode){
          this.$emit("clickNodeEmitFn", node);
      }else{
        this.$emit("clickNodeEmitFn", cell);
      }
    },
    onPushBoxFn() {
      this.pushFlag = !this.pushFlag;
     ` setTimeout(() => {
        this.$emit("resizeFn");
      }, 300);`
    },

    getDeviceTree() {
      api.getDeviceTree().then((res) => {
        console.log(res);
        this.treeData = res;
      });
    },
  },
  mounted() {
    // setTimeout(() => {
    //   console.log(this.expendAll, 'oooooo');
    // }, 3000);
  },
};
</script>
<style lang="scss" scoped>

.common_tree_wrap {
  width: 256px;
  height: 100%;
  //background: linear-gradient(to bottom, #153567, #17567d, #153567);
  background: transparent;

  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s linear;
  &.zeroWidth {
    width: 30px;
    padding: 20px 0;
  }
  .tree_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .tree_search_wrap {
      flex: 0 0 auto;
      .search_ipt {
        width: 100%;
      }
    }
    .tree_main {
      margin-top: 20px;
      // flex: 1 1 auto;
      // box-sizing: border-box;
      // padding-right: 10px;
    }
  }

  .tree_not_content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .not_content_text {
      width: 20px;
      font-size: 16px;
      text-align: center;
      color: #e0efff;
    }
  }

  .push_wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 50px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:hover {
      .push_icon {
        font-weight: 700;
      }
    }
    .push_icon {
      color: #e0efff;
    }
  }
}
</style>
